<template>
	<el-card shadow="hover">
		<template v-slot:header>
			企业动态
			<div style="float: right;display: inline-flex;color: #FFFFFF;">
				<sc-icon style="cursor: pointer;width: 18px; margin-right: 10px;" @click="reLoadDy" title="刷新"><el-icon-refresh-right/></sc-icon>
				<sc-icon style="cursor: pointer;width: 18px;" @click="getMoreDy" title="全部"><el-icon-more-filled/></sc-icon>
			</div>
		</template>
		<div style="height: 210px;overflow: auto;">
			<el-timeline :reverse="true">
				<el-timeline-item
					v-for="(activity, index) in activities"
					:key="index"
					:timestamp="activity.timestamp"
					@click="showDetails(activity)">
					<div style="display: flex;">
						<span style="font-weight: bold;">{{activity.content}}</span>
						<div style="display: flex;right: 20px;position: absolute;"><el-avatar :src="activity.avatar" size="small"></el-avatar>
							<span style="margin-left: 10px;font-size: 12px;color: #909399;line-height: 24px;">{{activity.createUserName}}</span></div>
					</div>
					<div style="margin-top: 10px;color: gray">{{subRemark(activity.remark)}}</div>
				</el-timeline-item>
			</el-timeline>
		</div>
	</el-card>
	<recordDetails v-if="dialog.detailsSave" ref="recordDialog" @closed="dialog.detailsSave=false"></recordDetails>
</template>

<script>
import recordDetails from "@/views/info/dynamics/details";
export default {
	components: {
		recordDetails,
	},
	data() {
		return {
			activities:[],
			dialog: {
				detailsSave:false,
			},
			timer:null
		}
	},
	created() {
		clearInterval(this.timer)
		this.timer = null
	},
	beforeUnmount() {
		clearInterval(this.timer);
		this.timer = null
	},
	mounted() {
		this.getDynamicsRecordForDesk();
		this.setTimer();
	},
	methods: {
		reLoadDy()
		{
			this.getDynamicsRecordForDesk();
		},
		getMoreDy(){
			this.$nextTick(() => {
				this.$router.replace({
					path: '/info/dynamics',
				})
			})
		},
		subRemark(str){
			if(str!=undefined&&str!=null)
			{
				if(str.length>30){
					return str.substring(0,30)+"...";
				}else{
					return str;
				}
			}else{
				return "";
			}
		},
		async getDynamicsRecordForDesk(){
			var res = await this.$API.info.dynamics.getDynamicsRecordForDesk.get();
			if (res.code == 200) {
				this.activities = res.data
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		showDetails(row) {
			this.dialog.detailsSave = true
			this.$nextTick(() => {
				this.$refs.recordDialog.open().setData(row);
			})
		},
		setTimer() {
			if(this.timer == null) {
				this.timer = setInterval( () => {
					this.getDynamicsRecordForDesk();
				}, this.$TOOL.data.get("MSG_TIME"))
			}
		}
	}
}
</script>
<style scoped>
:deep(.el-card__header){
	background: rgba(64, 158, 255, 0.6);
	color: white;
	padding: 10px 20px 10px 20px;
}
:deep(.el-timeline-item){
	text-align: left;
	cursor: pointer;
	margin-top: 10px;
}

</style>
